<nz-row>
  <div class="searchItem">
    <label for="noQuery">编码：</label>
    <input
      id="noQuery"
      nz-input
      placeholder="编码/序列号/IMEI"
      [(ngModel)]="query.code"
    />
  </div>
  <div class="searchItem" *ngIf="showAllDevice==='all'">
    <label for="statusQuery">状态：</label>
    <nz-select id="statusQuery" [(ngModel)]="query.status" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               nzAllowClear
               [nzMaxTagCount]="1" nzShowSearch>
      <nz-option [nzValue]="0" [nzLabel]="DEVICESTATUS[0]"></nz-option>
      <nz-option [nzValue]="1" [nzLabel]="DEVICESTATUS[1]"></nz-option>
      <nz-option [nzValue]="2" [nzLabel]="DEVICESTATUS[2]"></nz-option>
      <nz-option [nzValue]="3" [nzLabel]="DEVICESTATUS[3]"></nz-option>
      <nz-option [nzValue]="4" [nzLabel]="DEVICESTATUS[4]"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem" *ngIf="showAllDevice==='all'">
    <label for="occupyStatusQuery">渠道占用：</label>
    <nz-select id="occupyStatusQuery" [(ngModel)]="query.occupyStatus" nzPlaceHolder="全部" nzMode="multiple" nzAllowClear
               [nzBackdrop]="true" [nzMaxTagCount]="1" nzShowSearch>
      <nz-option [nzValue]="0" [nzLabel]="CHANNELOCCUPY[0]"></nz-option>
      <nz-option [nzValue]="1" [nzLabel]="CHANNELOCCUPY[1]"></nz-option>
      <nz-option [nzValue]="2" [nzLabel]="CHANNELOCCUPY[2]"></nz-option>
      <nz-option [nzValue]="3" [nzLabel]="CHANNELOCCUPY[3]"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="locationQuery">库位：</label>
    <nz-select id="locationQuery" [(ngModel)]="query.libraryId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="location.id" [nzLabel]="location.name" *ngFor="let location of locationOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="qualityQuery">成色：</label>
    <nz-select id="qualityQuery" [(ngModel)]="query.colourId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="colour.id" [nzLabel]="colour.name" *ngFor="let colour of colourOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="brandQuery">设备品牌：</label>
    <nz-select id="brandQuery" [(ngModel)]="query.typeId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               (ngModelChange)="getTypeList()" [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="brand.id" [nzLabel]="brand.name" *ngFor="let brand of brandOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="typeQuery">设备型号：</label>
    <nz-select id="typeQuery" [(ngModel)]="query.modelId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="type.id" [nzLabel]="type.name" *ngFor="let type of typeOptions"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>来源：</label>
    <nz-select
      [(ngModel)]="query.sourceList"
      nzPlaceHolder="全部"
      nzMode="multiple"
      [nzBackdrop]="true"
      [nzMaxTagCount]="1"
      nzAllowClear
      nzShowSearch>
      <nz-option
        *ngFor="let option of sourceOptions"
        [nzValue]="option.value"
        [nzLabel]="option.label">
      </nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>验收时间：</label>
    <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.machineDates"></nz-range-picker>
  </div>
  <!-- <div class="searchItem">
    <label for="firstQuery">首次入库时间：</label>
    <nz-range-picker id="firstQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.first"></nz-range-picker>
  </div> -->
  <div class="searchItem">
    <label for="finishedQuery">成交入库时间：</label>
    <nz-range-picker id="finishedQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.finished"></nz-range-picker>
  </div>
  <!--  <div class="searchItem">-->
  <!--    <label for="upQuery">上架时间：</label>-->
  <!--    <nz-range-picker id="upQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.up"></nz-range-picker>-->
  <!--  </div>-->
  <div class="searchItem">
    <label for="outQuery">出库时间：</label>
    <nz-range-picker id="outQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.out"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="showChangeDPModal()"
          *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:location')">修改库位
  </button>
  <button nz-button nzType="primary" (click)="usedChannel(2)"
          *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:occupy')">二手占用
  </button>
  <button nz-button nzType="primary" (click)="usedChannel(0)"
          *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:occupy')">取消二手占用
  </button>
  <button nz-button nzType="primary" (click)="export()">导出</button>
  <button nz-button nzType="primary" (click)="setPrint()">设置打印机</button>

  <nz-radio-group [(ngModel)]="showAllDevice" (ngModelChange)="changeView()" style="position: absolute;right: 20px">
    <label nz-radio-button nzValue="all">全部机器</label>
    <label nz-radio-button nzValue="store">在库机器</label>
  </nz-radio-group>
</nz-row>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzScroll]="{ x: '1100px' }"
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)" nzLeft></th>
    <th nzAlign="center" nzWidth="180px" nzLeft>机器编码</th>
    <th nzAlign="center" nzWidth="80px">状态</th>
    <th nzAlign="center" nzWidth="80px">渠道占用</th>
    <th nzAlign="center" nzWidth="100px">来源</th>
    <th nzAlign="center" nzWidth="140px">库位</th>
    <th nzAlign="center" nzWidth="180px">序列号</th>
    <th nzAlign="center" nzWidth="180px">IMEI</th>
    <th nzAlign="center" nzWidth="80px">C端成色</th>
    <th nzAlign="center" nzWidth="80px">B端成色</th>
    <th nzAlign="center" nzWidth="180px">型号</th>
    <th nzAlign="center" nzWidth="80px">内存</th>
    <th nzAlign="center" nzWidth="80px">用户估价</th>
    <th nzAlign="center" nzWidth="80px">实际回收价</th>
    <!--    <th nzAlign="center">B端售价</th>-->
    <!--    <th nzAlign="center">C端售价</th>-->
    <th nzAlign="center" nzWidth="180px">验收时间</th>
    <!-- <th nzAlign="center" nzWidth="180px">首次入库时间</th> -->
    <th nzAlign="center" nzWidth="180px">成交入库时间</th>
    <!--    <th nzAlign="center">上架时间</th>-->
    <th nzAlign="center" nzWidth="180px">出库时间</th>
    <th nzAlign="center" nzWidth="180px">最后修改时间</th>
    <th nzAlign="center" nzWidth="280px" nzRight>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td
      [nzChecked]="setOfCheckedId.has(data['id'])"
      [nzDisabled]="data['disabled'] || data['status'] === 4"
      (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft
    ></td>
    <td nzAlign="center" nzLeft>{{ data['equipmentCode'] }}</td>
    <td nzAlign="center">{{ DEVICESTATUS[data['status']] }}</td>
    <td nzAlign="center">{{ CHANNELOCCUPY[data['occupyStatus']] }}</td>
    <!-- 来源 -->
    <td nzAlign="center">{{ sourceFilter(data['source']) }}</td>
    <td nzAlign="center">{{ data['libraryName'] }}</td>
    <td nzAlign="center">{{ data['serialNumber'] }}</td>
    <td nzAlign="center">{{ data['imei'] }}</td>
    <td nzAlign="center">{{ data['colourName'] }}</td>
    <td nzAlign="center">{{ data['colourNameB'] }}</td>
    <td nzAlign="center">{{ data['typeName'] }}-{{ data['modelName'] }}</td>
    <td nzAlign="center">{{ data['memory'] }}</td>
    <td nzAlign="center">{{ (data['userValuation'] || 0) + (data['orderAprc'] || 0) + (data['cprc'] || 0) }}</td>
    <td
      nzAlign="center"
      [ngStyle]="{
        color: ((data['userValuation'] || 0) + (data['orderAprc'] || 0)) !== ((data['realValuation'] || 0) + (data['aprc'] || 0)) ? 'rgb(255, 165, 2)' : '',
        textDecoration: 'underline',
        cursor: 'pointer'
      }"
      (click)="showReportModal(data['equipmentCode'])"
    >
      {{ (data['realValuation'] || 0) + (data['aprc'] || 0) + (data['cprc'] || 0) }}
    </td>
    <!--    <td nzAlign="center">{{ data['shopPriceB'] }}</td>-->
    <!--    <td nzAlign="center">{{ data['shopPriceC'] }}</td>-->
    <!-- <td nzAlign="center">{{ data['createTime'] }}</td> -->
    <!-- 验收时间 -->
    <td nzAlign="center">{{ data['acceptanceTime'] || '-' }}</td>
    <td nzAlign="center">{{ data['clinchTime'] }}</td>
    <!--    <td nzAlign="center">{{ data['shelvesTime'] }}</td>-->
    <td nzAlign="center">{{ data['outBoundTime'] }}</td>
    <td nzAlign="center">{{ data['updateTime'] }}</td>
    <td nzAlign="center" nzRight>
      <a target="_blank" routerLink="/used-store/usedDeviceDetail" [queryParams]="{deviceId: data['id']}">查看</a>
      <!-- <a (click)="view(data)">查看</a> -->
      <a (click)="showTrackModal(data['id'])">跟进</a>
      <a
        *ngIf="data['status'] === 2 && permissionService.userPermission.has('used-store:usedDeviceList:againPut')"
        (click)="againMachine(data)"
      >重新验机入库</a>
      <a (click)="print(data)" *ngIf="permissionService.userPermission.has('used-store:usedDeviceList:print')">打印</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>

<!--修改库位-->
<nz-modal [(nzVisible)]="changeDLModal.visible" nzTitle="选择库位" [nzWidth]="300" nzOkText="保存"
          (nzOnCancel)="hideChangeDLModal()" (nzOnOk)="hideChangeDLModalSubmit()">
  <div *nzModalContent>
    <span>库位：</span>
    <nz-select style="width: 150px" [(ngModel)]="changeDLModal.libraryId" nzPlaceHolder="请选择库位" [nzBackdrop]="true"
               nzShowSearch>
      <nz-option [nzValue]="location['id']" [nzLabel]="location['name']"
                 *ngFor="let location of locationOptions"></nz-option>
    </nz-select>
  </div>
</nz-modal>

<app-print-device-info [hidden]="true" [deviceInfo]="deviceInfo" id="printDeviceInfo"></app-print-device-info>

<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackHistoryList.length">
<!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackHistoryList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

<machine-report-modal #reportModalRef></machine-report-modal>
